<!--  -->
<template>
  <div class="education">
    <cpn>
      <h1>教育头条</h1>
    </cpn>
    <!-- 教育头条的筛选 -->
    <saixuan>
      <el-input placeholder="输入文章标题关键字......" v-model="inpVal" clearable></el-input>
    </saixuan>
    <!-- 教育头条的内容 -->
    <div class="content">
      <div class="education-wrap">
        <!-- 上面标题部分开始 -->
        <div class="education-title">
          <slot title="left">
            <div class="education-title-left">
              <img src="../assets/h1.png" alt />
              <span>{{n.head}}</span>
            </div>
          </slot>
          <slot name="right">
            <div class="education-title-right">
              <el-button
                style="
             width: 103px;height:32px;border:1px solid #9137f3;;
             "
                type="primary"
              >
                <img src="../assets/btnimg1.png" class="el-icon-circle-plus-outline" alt />
                <router-link id="router-span1" :to="n.path" tag="span">{{n.title}}</router-link>
              </el-button>
              <el-button
                style="
             width: 103px;height:32px;border:1px solid #9137f3;;
             "
                type="primary"
              >
                <img src="../assets/btnimg2.png" class="el-icon-delete" alt />
                <router-link id="router-span2" to="/exercycle" tag="span">回收站</router-link>
              </el-button>
            </div>
          </slot>
        </div>
        <!-- 上面标题部分结束 -->
        <!-- 总内容的开始 -->
        <div class="education-content">
          <div class="education-content-head">
            <div style="width:80px;height:60px;"></div>
            <div style="width:192px;height:60px;">标题</div>
            <div style="width:192px;height:60px;">缩略图</div>
            <div style="width:192px;height:60px;">描述</div>
            <div style="width:86px;height:60px;">人传人</div>
            <div style="width:106px;height:60px;">上传时间</div>
            <div style="width:192px;height:60px;">操作</div>
          </div>
          <div class="education-content-body">
            <div class="education-content-body-item" v-for="(item,index) in listcont1" :key="item.id">
              <div class="education-content-body-item-con" v-for="item2 in item.child" :key="item2.id2">
                <div style="width:80px;height:90px;" class="education-content-body-item1">
                  <input @click="onlySelect(index)" :checked="item2.only_select" type="checkbox" />
                </div>
                <div style="width:192px;height:90px;" class="education-content-body-item2">
                  <p class="item-content">{{item2.title}}</p>
                </div>
                <div style="width:192px;height:90px;" class="education-content-body-item4">
                  <img style="width:97px;height:54px;" src="../assets/lbtimg.png" alt />
                </div>
                <div style="width:192px;height:90px;" class="education-content-body-item5">
                  <p class="des-content">{{item2.des}}</p>
                </div>
                <div style="width:86px;height:90px;" class="education-content-body-item5">
                  <span>{{item2.pp}}</span>
                </div>
                <div style="width:106px;height:90px;" class="education-content-body-item5">
                  <span>{{item2.time}}</span>
                </div>
                <div
                  style="width:192px;height:90px;position:relative;color:#9137f3;"
                  class="education-content-body-item10"
                >
                  <router-link tag="b" to="/Article">编辑</router-link>
                  <el-button :plain="true" @click="openSuc">加入回收站</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="fenye">
            <div class="fenye-left">
              <input type="checkbox" @click="allSelect" :checked="all_select" />
              <span style="color:#333">全选</span>
              <span style="color:#999" :plain="true" @click="openSuc">批量加入回收站</span>
            </div>
            <template>
              <div class="block">
                <el-pagination
                  :background="true"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="100"
                ></el-pagination>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
       

<script>
import saixuan from "../components/saixuan";
import cpn from "../components/biaoti.vue";
export default {
  components: {
    saixuan,
    cpn,
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 加入回收站
    openSuc() {
      console.log();
      this.$message({
        message: "加入回收站成功！",
        type: "success",
        center: true
      });
    },
    // 全选
    allSelect() {
      this.all_select = !this.all_select;
      this.listcont1.forEach((item) => {
        item.child.forEach((item2) => {
          // item2.only_select = this.all_select
          item2.only_select = this.all_select;
        });
      });
      for (let item1 of this.listcont1) {
        for (let item2 of item1.child) {
          console.log(item2.only_select);
        }
      }
      console.log(this.all_select);
    },
    // 单选
    onlySelect(index) {
      this.listcont1[index].child[0].only_select = !this.listcont1[index]
        .child[0].only_select;

      let bool = this.listcont1.every((item) => {
        return item.child[0].only_select == true;
      });
      if (bool) {
        this.all_select = bool;
      } else {
        this.all_select = bool;
      }
    },
  },
  data() {
    return {
      inpVal:"",
      all_select: false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      n: {
        title: "新增文章",
        path: "/Article",
        head: "文章列表",
      },
      listcont1: [
        {
          id: 1,
          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 1,
              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 2,
          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 2,
              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 3,
          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 3,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 4,
          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 4,
              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 5,
          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 5,
              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 6,
          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 6,
              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 7,
          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 7,
              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 8,

          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 8,

              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 9,

          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 9,
              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
        {
          id: 10,

          operating: ["编辑", "加入回收站"],
          child: [
            {
              id2: 10,
              only_select: false,
              title: "30所京城中小学这样过“世界读书日”",
              des: "正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊......",
              pp: "Daisy",
              time: "201-01-25 10:55",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style>
.education {
  width: 1140px;
  margin: 0 auto;
}
.education-wrap {
  margin: 0 auto;
  width: 1100px;
  height: 1174px;
  border: 1px solid #eeeeee;
  margin-top: 10px;
  padding: 0 20px;
}
.education-title {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.education-title-left {
  display: flex;
  position: relative;
  padding-top: 16px;
}
.education-title-left img {
  display: block;
  width: 17px;
  height: 14px;
}
.education-title-left span {
  font-size: 14px;
  color: #666;
  position: relative;
  left: 4px;
  top: -3px;
}

.education-title-right .el-button {
  position: relative;
  background: #fff;
}

.education-title-right {
  padding-top: 12px;
}
#router-span1 {
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 10px;
  color: #a760f6;
}
.el-icon-circle-plus-outline {
  position: absolute;
  left: 14px;
  top: 7px;
}
#router-span2 {
  font-size: 12px;
  position: absolute;
  right: 18px;
  top: 10px;
  color: #a760f6;
}
.el-icon-delete {
  position: absolute;
  left: 20px;
  top: 7px;
}
/* 内容的开始 */
.education-content {
  width: 100%;
}
.education-content-head {
  width: 1058px;
  height: 60px;
  background-color: #9137f3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 60px;
  color: #fff;
  font-size: 14px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
}
.education-content-head div {
  line-height: 60px;
  text-align: center;
}
/* 每行内容 */
.education-content-body-item {
  width: 100%;
  height: 90px;
  border-bottom: 1px solid #ccc;
}
.education-content-body-item-con {
  height: 90px;
  line-height: 90px;
  display: flex;
  justify-content: space-between;
}
.education-content-body-item-con div {
  text-align: center;
  font-size: 12px;
  color: #333;
  height: 90px;
}
.education-content-body-item-con p {
  line-height: 20px;
}
.item-content {
  margin-top: 26px;
}
.des-content {
  margin-top: 15px;
}
.education-content-body-item4 {
  box-sizing: border-box;
  padding-top: 18px;
}
.education-content-body-item10 b {
  cursor: pointer;
}
.education-content-body-item10 b:hover {
  text-decoration: underline;
}

.el-button {
  border: none;
  font-size: 12px;
  color: #9137f3;
  font-weight: 700;
}
.el-button:hover {
  text-decoration: underline;
}
/* 分页 */
.fenye {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.fenye-left {
  font-size: 14px;
}
.fenye-left input {
  margin-right: 3px;
}
.fenye-left span {
  margin: 0 4px;
}
.el-pagination {
  position: relative;
  bottom: -5px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #9137f3;
  color: #fff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #fff;
  border: 1px solid #9137f3;
  color: #9137f3;
  min-width: 30px;
  border-radius: 4px;
}
.el-pagination__sizes {
    margin: 0 10px 0 0;
    font-weight: 400;
    color: #606266;
}
.el-input__inner {
    /* width: 100px!important; */
    height: 37px;
}
.el-pagination {
    white-space: nowrap;
    padding: 2px 36px;
    color: #303133;
    font-weight: 700;
}
</style>